import React from 'react';
import { Card, Table, Tag, Button, Input, Space, DatePicker } from 'antd';
import { SearchOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

interface LogData {
  key: string;
  id: number;
  username: string;
  action: string;
  module: string;
  ip: string;
  browser: string;
  status: string;
  createdAt: string;
}

const Logs: React.FC = () => {
  const columns: ColumnsType<LogData> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '操作用户',
      dataIndex: 'username',
      key: 'username',
      width: 120,
    },
    {
      title: '操作内容',
      dataIndex: 'action',
      key: 'action',
      ellipsis: true,
    },
    {
      title: '操作模块',
      dataIndex: 'module',
      key: 'module',
      render: (module: string) => (
        <Tag color="blue">{module}</Tag>
      ),
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
      width: 140,
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
      key: 'browser',
      width: 150,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => (
        <Tag color={status === 'success' ? 'green' : 'red'}>
          {status === 'success' ? '成功' : '失败'}
        </Tag>
      ),
    },
    {
      title: '操作时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 180,
      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  const data: LogData[] = [
    {
      key: '1',
      id: 1,
      username: 'admin',
      action: '登录系统',
      module: '认证模块',
      ip: '192.168.1.100',
      browser: 'Chrome 120.0.0',
      status: 'success',
      createdAt: '2024-01-15 10:30:00',
    },
    {
      key: '2',
      id: 2,
      username: 'user1',
      action: '创建订单',
      module: '订单模块',
      ip: '192.168.1.101',
      browser: 'Firefox 121.0',
      status: 'success',
      createdAt: '2024-01-15 10:45:00',
    },
    {
      key: '3',
      id: 3,
      username: 'user2',
      action: '登录失败',
      module: '认证模块',
      ip: '192.168.1.102',
      browser: 'Edge 120.0',
      status: 'failed',
      createdAt: '2024-01-15 11:00:00',
    },
  ];

  return (
    <div>
      <Card
        title="系统日志"
        extra={
          <Space>
            <Button icon={<ExportOutlined />}>导出</Button>
            <Button icon={<ReloadOutlined />}>刷新</Button>
          </Space>
        }
      >
        <div style={{ marginBottom: 16 }}>
          <Space>
            <Input.Search
              placeholder="搜索用户名或操作内容"
              style={{ width: 300 }}
              prefix={<SearchOutlined />}
            />
            <RangePicker style={{ width: 350 }} />
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button>重置</Button>
          </Space>
        </div>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            total: data.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
        />
      </Card>
    </div>
  );
};

export default Logs;